﻿
window.onload = function () {
    echart01();
    echart02();
    echart03();
    echart04();
    echart05();
  
   
    function echart01() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'),'light');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '房屋类型',
                subtext: '数量'
            },
            tooltip: {},
            legend: {
                data: ['房屋数']
            },
            xAxis: {
                data: ["廉租房", "公租房", "安置房", "商品房", "房改房"]
            },
            yAxis: {},
            series: [{
                name: '套',
                type: 'bar',
                data: [100, 50, 100, 40, 90]
            },{
                name:'入住率%',
                type:'line',
                smooth:true,
                data:[83,50,68,22,89],
                
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function echart02() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'),'light');

        // 指定图表的配置项和数据
        option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '人数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 323, name: '老人' },
                  { value: 411, name: '女性青年' },
                  { value: 455, name: '男性青年' },
                  { value: 300, name: '未成年人' }
                ]
              }
            ]
          };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    function echart03() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'),'light');

        // 指定图表的配置项和数据
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '10%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['车流量', '车位利用率']
  },
  xAxis: [
    {  name:'时间',
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: ['9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '车流量',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} 辆'
      }
    },
    {
      type: 'value',
      min:0,
      max:100,
      interval:20,
      axisLabel: {
        formatter: '{value} %'
      }
    },
    {
      type: 'value',
      name: '利用率',
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} %'
      }
    }
  ],
  series: [
    {
      name: '车流量',
      type: 'bar',
      data: [
        20, 44, 33, 130, 120, 55, 110, 162, 70, 88, 44, 33
      ]
    },
    
    {
      name: '车位利用率',
      type: 'line',
      yAxisIndex: 2,
      data: [9, 22, 19, 73, 68, 33, 61, 88, 40, 51, 21, 14],
      itemStyle:{
        color:'red'
      }
    }
  ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function echart04() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart4'),'light');

      // 指定图表的配置项和数据
      option = {
 
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['党建信息']
        },
        series: [
          {
            name: '党组织数',
            type: 'bar',
            data: [11]
          },
          {
            name: '党员数',
            type: 'bar',
            data: [110]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  }
  function echart05() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'),'light');

    // 指定图表的配置项和数据
    option = {
      title: {
        text: '党建活动数统计',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        min:0,
        max:10,
        type: 'value'
      },
      series: [
        {
          data: [1, 2, 4, 3, 2, 1, 7,3,5,1,2,1,1],
          type: 'line',
          color: 'red'
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


}